<template>
    <section class="homePage-box">
        <app-header></app-header>

        <!--banner轮播-->
        <bannerSwiper></bannerSwiper>

        <!--外汇跑马灯-->
        <article class="Foreign-currency-marquee">
            <div class="container">
                <span>中国银行外汇牌价 |</span>
                <div id="wrap-paomadeng">
                    <!--<vue-seamless-scroll :data="exchangeRateItem" :class-option="optionLeft" class="seamless-warp">-->
                        <!--<ul class="clearfix">-->
                            <!--<li v-for="(item, index) in exchangeRateItem" :key="index">{{ isNull0(item.currencyName) }}：{{ ((item.boeConversionRate / 100).toFixed(2)) }}</li>-->
                        <!--</ul>-->
                    <!--</vue-seamless-scroll>-->
                    <ul class="clearfix">
                        <li v-for="(item, index) in exchangeRateItem" :key="index">{{ isNull0(item.currencyName) }}：{{ ((item.boeConversionRate / 100).toFixed(2)) }}</li>
                    </ul>
                </div>
            </div>
            <p v-show="false">{{getExchangeRate}}</p>
        </article>

        <!--公司优势4个图-->
        <article class="company-advantage">
            <div class="container">
                <a-row>
                    <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="aside clearfix flex-justify-left">
                        <img src="/static/img/company-advantage1.png" class="left">
                        <div class="left">
                            <h5>全美优质房源</h5>
                            <span>众多国际开发商鼎力支持</span>
                        </div>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="aside clearfix flex-justify-center" style="padding: 0 0 0 15px;">
                        <img src="/static/img/company-advantage2.png" class="left">
                        <div class="left">
                            <h5>1对1顾问服务</h5>
                            <span>专业团队提供殿堂级服务体验</span>
                        </div>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6"  class="aside clearfix flex-justify-center" style="padding: 0 0 0 90px;">
                        <img src="/static/img/company-advantage3.png" class="left">
                        <div class="left">
                            <h5>金融贷款服务</h5>
                            <span>锁定超利率方式灵活</span>
                        </div>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6"  class="aside clearfix flex-justify-end">
                        <img src="/static/img/company-advantage4.png" class="left">
                        <div class="left">
                            <h5>境外看房服务</h5>
                            <span>金牌经纪人全程陪同</span>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </article>

        <!--近期活动Recent activities-->
        <recentActivities></recentActivities>

        <!--后台管理单条banner广告图-->
        <div class="container" v-show="!activitiesBanner1_noDataShow">
            <a :href="activitiesBanner1.url" class="activities-banner-admin-img" target="_blank" :title="activitiesBanner1.description" :alt="activitiesBanner1.description">
                <a-tooltip placement="top" :title="activitiesBanner1.description">
                    <img v-lazy="activitiesBanner1.photo" :title="activitiesBanner1.description" :alt="activitiesBanner1.description">
                </a-tooltip>
            </a>
        </div>

        <!--房源推荐-->
        <recommendHouse></recommendHouse>

        <!--后台管理单条banner广告图-->
        <div class="container" v-show="!activitiesBanner2_noDataShow">
            <a :href="activitiesBanner2.url" class="activities-banner-admin-img" target="_blank" :title="activitiesBanner2.description" :alt="activitiesBanner2.description">
                <a-tooltip placement="top" :title="activitiesBanner2.description">
                    <img v-lazy="activitiesBanner2.photo" :title="activitiesBanner2.description" :alt="activitiesBanner2.description">
                </a-tooltip>
            </a>
        </div>

        <!--热门城市-->
        <hotCity></hotCity>

        <!--后台管理单条banner广告图-->
        <div class="container" v-show="!activitiesBanner3_noDataShow">
            <a :href="activitiesBanner3.url" class="activities-banner-admin-img" target="_blank" :title="activitiesBanner3.description" :alt="activitiesBanner3.description">
                <a-tooltip placement="top" :title="activitiesBanner3.description">
                    <img v-lazy="activitiesBanner3.photo" :title="activitiesBanner3.description" :alt="activitiesBanner3.description">
                </a-tooltip>
            </a>
        </div>

        <!--美国房地产资讯-->
        <USRealEstateNews></USRealEstateNews>

        <!--华美优胜动态-->
        <HMYSDynamic></HMYSDynamic>

        <!--置业百科-->
        <Question></Question>

        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部

    import bannerSwiper from './bannerSwiper.vue'; //banner轮播
    // import vueSeamlessScroll from 'vue-seamless-scroll';//vue无缝滚动——外汇跑马灯使用
    import recentActivities from './recentActivities.vue'; //近期活动
    import recommendHouse from './recommendHouse.vue'; //推荐房源
    import hotCity from './hotCity.vue'; //热门城市
    import USRealEstateNews from './USRealEstateNews.vue';//美国房地产资讯
    import HMYSDynamic from './HMYSDynamic.vue'; //华美优胜动态
    import Question from './Question.vue'; //置业百科——常见问题

    import consultantTeam from '../../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部


    export default {
        data() {
            return {
                exchangeRateItem: [],//汇率数据
                activitiesBanner1: {},//后台管理单条banner广告图1
                activitiesBanner1_noDataShow: false,//后台管理单条banner广告图1——没有数据提示信息是否显示

                activitiesBanner2: {},//后台管理单条banner广告图2
                activitiesBanner2_noDataShow: false,//后台管理单条banner广告图1——没有数据提示信息是否显示

                activitiesBanner3: {},//后台管理单条banner广告图3
                activitiesBanner3_noDataShow: false,//后台管理单条banner广告图1——没有数据提示信息是否显示

            }
        },
        computed: {
            //从state获取汇率数据
            getExchangeRate() {
                if(this.$store.getters.get_exchangeRate){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_exchangeRate).length != 0){
                        this.exchangeRateItem = this.$store.getters.get_exchangeRate;
                    }
                }
                return this.$store.getters.get_exchangeRate
            },
            //ue无缝滚动——外汇跑马灯——配置项
            optionLeft () {
                return {
                    step: 1, //步长 越大滚动速度越快
                    limitMoveNum: 5, //启动无缝滚动最小数据量 this.exchangeRateItem.length
                    hoverStop: true, //是否启用鼠标hover控制
                    direction: 2,//滚动方向：0向下，1向上，2向左，3向右
                    openWatch: true, //开启data实时监听
                    singleHeight: 0, //单条数据高度有值hoverStop关闭
                    waitTime: 1000, //单步停止等待时间
                }
            }
        },
        created() {
        },
        mounted() {
            //获取后台管理单条banner广告图数据1
            this.getActivitiesBannerData(2);
            //获取后台管理单条banner广告图数据2
            this.getActivitiesBannerData(3);
            //获取后台管理单条banner广告图数据3
            this.getActivitiesBannerData(7);

        },
        methods: {
           //获取后台管理单条banner广告图数据
            getActivitiesBannerData(adType){
                this.$get('/a/'+ adType).then(res => {
                    if (res.status == 0) {
                        switch (adType){
                            case 2:
                                this.activitiesBanner1 =  res.data.list[0];
                                //判断是否有数据
                                if(Object.keys(this.activitiesBanner1).length != 0){
                                    this.activitiesBanner1_noDataShow = false;
                                }else{
                                    this.activitiesBanner1_noDataShow = true;
                                }
                                break;
                            case 3:
                                this.activitiesBanner2 =  res.data.list[0];
                                //判断是否有数据
                                if(Object.keys(this.activitiesBanner2).length != 0){
                                    this.activitiesBanner2_noDataShow = false;
                                }else{
                                    this.activitiesBanner2_noDataShow = true;
                                }
                                break;
                            case 7:
                                this.activitiesBanner3 = res.data.list[0];
                                //判断是否有数据
                                if(Object.keys(this.activitiesBanner3).length != 0){
                                    this.activitiesBanner3_noDataShow = false;
                                }else{
                                    this.activitiesBanner3_noDataShow = true;
                                }
                                break;
                        }
                    } else {
                        console.log(res.msg);
                        switch (adType){
                            case 2:
                                this.activitiesBanner1_noDataShow = true;
                                break;
                            case 3:
                                this.activitiesBanner2_noDataShow = true;
                                break;
                            case 7:
                                this.activitiesBanner3_noDataShow = true;
                                break;
                        }
                    }
                });
            }
        },
        components: {
            'app-header': Header,//公共组件——头部
            bannerSwiper,//banner轮播
            // vueSeamlessScroll,//vue无缝滚动——外汇跑马灯使用
            recentActivities,//近期活动
            recommendHouse,//推荐房源
            hotCity,//热门城市
            USRealEstateNews,//美国房地产资讯
            HMYSDynamic,//华美优胜动态
            Question,//置业百科——常见问题
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .homePage-box {
            background: #fff;
            /*外汇跑马灯*/
            .Foreign-currency-marquee {
                padding: 10px 0;
                background: rgba(65, 169, 237, .1);
                > .container {
                    font-size: 16px;
                    overflow: hidden;
                    >span{
                        float: left;
                        width: 150px;
                    }
                    >#wrap-paomadeng{
                        float: left;
                        >.seamless-warp {
                            overflow: hidden;
                            height: 24px;
                            width: 1000px;
                            ul{
                                width: 810px;
                                >li {
                                    float: left;
                                    padding: 0 50px;
                                }
                            }
                        }

                        ul{
                            width: 1000px;
                            >li {
                                float: left;
                                padding: 0 20px;
                            }
                        }
                    }
                }
            }

            //公司优势4个图
            .company-advantage{
                width: 100%;
                height: 90px;
                background: #efefef;
                padding: 23px 0;
                >.container{
                    >.ant-row{
                        >.aside{
                            >img{
                                max-width: 53px;
                            }
                            >div{
                                margin: 0 0 0 10px;
                                >h5{
                                    font-size: 16px;
                                    font-weight: bold;
                                    margin: 5px 0 2px 0;
                                }
                                >span{
                                    font-size: 13px;
                                }
                            }
                        }

                        >.flex-justify-center{
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                        }
                        >.flex-justify-left{
                            display: flex;
                            flex-direction: row;
                            justify-content: left;
                        }
                        >.flex-justify-end{
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-end;
                        }
                    }
                }
            }

            /*后台管理单条banner广告图*/
            .activities-banner-admin-img{
                background: #fff;
                width: 100%;
                height: 115px;
                padding: 0;
                display: block;
                >img{
                    width: 100%;
                    height: 100%;
                }
            }

            .public-header-bg{
                height: 70px;
                background: url("/static/img/recommend-house-header.png") no-repeat center center;
                background-size: 100%;
                >p{
                    width: 50%;
                    font-size: 22px;
                    margin-bottom: 0px;
                }
                >p:first-of-type{
                    float: left;
                    text-align: right;
                }
                >p:last-of-type{
                    width: 48%;
                    float: right;
                    text-align: left;
                    margin: 35px 0 0 0;
                }
            }

        }
    }
</style>
